<template>
  <div style="display: inline-block;">
    <ul v-if="files" class="el-upload-list el-upload-list--picture-card">
      <li
        v-for="file in files"
        :key="file.FileId"
        class="el-upload-list__item"
      >
        <icon v-if="file.type === 'file'" class="icon" :icon="file.icon" />
        <img
          v-else-if="file.type === 'video'"
          :src="file.thumbnai | imageUri"
          :alt="file.FileName"
          class="el-upload-list__item-thumbnail"
        >
        <img
          v-else
          :src="file.FileUri | imageUri"
          :alt="file.FileName"
          class="el-upload-list__item-thumbnail"
        >
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-delete"
          >
            <i class="el-icon-zoom-in" @click="(e)=> openFile(file, e)" />
          </span>
        </span>
      </li>
    </ul>
    <el-dialog width="90%" :visible.sync="amplifyVisible" :destroy-on-close="true" :title="title" @close="close">
      <div style="width: 100%; overflow: auto;text-align: center;">
        <img v-if="chioseFile.type == 'img'" style="max-width: 100%;" :src="chioseFile.FileUri | imageUri" alt="">
        <video v-else-if="chioseFile.type == 'video'" ref="videoCon" controls="" autoplay="false" name="media">
          <source :src="chioseFile.FileUri | imageUri" type="video/mp4">
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as upTools from '@/utils/fileUpTools'
export default {
  components: { },
  props: {
    fileList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      files: null,
      chioseFile: {},
      title: null,
      amplifyVisible: false
    }
  },
  watch: {
    fileList: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.files = null
        }
      },
      immediate: true
    }
  },
  methods: {
    reset() {
      const list = this.fileList.map(c => {
        upTools.initFile(c)
        return c
      })
      this.files = list
    },
    close() {
      if (this.chioseFile.type === 'video') {
        this.$refs.videoCon.pause()
        this.chioseFile = {}
      }
    },
    openFile(file, e) {
      e.stopPropagation()
      if (file.type === 'img' || file.type === 'video') {
        this.title = file.FileName
        this.chioseFile = file
        this.amplifyVisible = true
        return
      } else if (file.ext === '.pdf') {
        const uri = file.FileUri + '?accreditId=' + this.$store.getters.token
        window.open(uri)
        return
      }
      const uri = file.FileUri + '?accreditId=' + this.$store.getters.token + '&isDown=true'
      window.open(uri)
    }
  }
}
</script>
<style scoped>
.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px;
  border-color: #8c939d;
  border-style: dashed;
}
.el-upload-list__item {
  line-height: 120px;
  text-align: center;
  width: 120px;
  height: 120px;
  margin: 5px;
}
.el-upload-list--picture-card {
  padding-left: 20px;
}
.uploader-img {
  height: 120px;
}
.el-upload-list--picture-card .icon {
  font-size: 40px;
}
</style>
<style>
.el-upload-list .el-progress__text {
  color: #ff6d6d;
  font-weight: 700;
  font-size: 24px !important;
}
.el-loading-spinner {
  top: 25% !important;
}
</style>
